<template>
  <view class="home">
    <!-- 标签栏 -->
    <view class="home-tab">
      <!-- 标签栏标题 -->
      <view class="home-tab-title">
        <!-- uniSegmentedControl是uni-ui的分段器（标签栏）组件 -->
        <uni-segmented-control :current="current"
          :values="items.map(v=>v.title)" @clickItem="onClickItem"
          style-type="text" active-color="#d4237a">
        </uni-segmented-control>
      </view>
      <!-- 右侧搜索图标 -->
      <view class="iconfont iconsearch"></view>
    </view>
    <view class="home-content">
      <!-- 推荐 -->
      <view v-if="current === 0">
        <home-recommend></home-recommend>
      </view>
      <!-- 分类 -->
      <view v-if="current === 1">
        <home-category></home-category>
      </view>
      <!-- 最新 -->
      <view v-if="current === 2">
        <home-new></home-new>
      </view>
      <!-- 专辑 -->
      <view v-if="current === 3">
        <home-album></home-album>
      </view>
    </view>
  </view>
</template>

<script>
import homeAlbum from './HomeAlbum'
import homeCategory from './HomeCategory'
import homeNew from './HomeNew'
import homeRecommend from './HomeRecommend'
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
  data() {
    return {
      items: [
        {
          title: '推荐'
        },
        {
          title: '分类'
        },
        {
          title: '最新'
        },
        {
          title: '专辑'
        }
      ],
      current: 0
    }
  },
  components: {
    homeAlbum,
    homeCategory,
    homeNew,
    homeRecommend,
    uniSegmentedControl
  },
  methods: {
    // 根据被点击的标题，切换标题
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.home-tab {
  position: relative;
  box-shadow: 0 3rpx 10rpx 2rpx rgba(100, 100, 100, 0.2);
  z-index: 1;
  .home-tab-title {
    width: 60%;
    margin: 0 auto;
  }
  .iconsearch {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
</style>